<template>
  <div class="video-container" :class="{ 'mobile-view': isMobile }">
    <video 
      ref="videoRef"
      class="video-player"
      :src="videoSrc"
      :poster="posterImage"
      :muted="muted"
      :autoplay="autoplay"
      :loop="loop"
      :controls="showControls"
      :playsinline="true"
      :width="width"
      :height="height"
    ></video>
    
    <div v-if="showPlayButton && !isPlaying" class="play-button-overlay" @click="playVideo">
      <div class="play-button">
        <svg viewBox="0 0 24 24" width="48" height="48">
          <path fill="#FFFFFF" d="M8,5.14V19.14L19,12.14L8,5.14Z" />
        </svg>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue';
import { useWindowSize, useMediaQuery } from '@vueuse/core';

const props = defineProps({
  videoSrc: {
    type: String,
    required: true
  },
  posterImage: {
    type: String,
    default: ''
  },
  autoplay: {
    type: Boolean,
    default: true
  },
  muted: {
    type: Boolean,
    default: true
  },
  loop: {
    type: Boolean,
    default: true
  },
  showControls: {
    type: Boolean,
    default: false
  },
  showPlayButton: {
    type: Boolean,
    default: false
  },
  width: {
    type: [String, Number],
    default: '100%'
  },
  height: {
    type: [String, Number],
    // default: 'auto'
    default: '100%'
  }
});

const emit = defineEmits(['play', 'pause', 'ended']);

// 响应式状态
const videoRef = ref<HTMLVideoElement | null>(null);
const isPlaying = ref(false);
const { width: windowWidth } = useWindowSize();

// 检测是否为移动设备
const isMobile = useMediaQuery('(max-width: 768px)');

// 播放视频
const playVideo = () => {
  if (videoRef.value) {
    videoRef.value.play().then(() => {
      isPlaying.value = true;
      emit('play');
    }).catch(error => {
      console.error('播放失败:', error);
      // 移动设备上，尝试静音后播放
      if (videoRef.value) {
        videoRef.value.muted = true;
        videoRef.value.play()
          .then(() => {
            isPlaying.value = true;
            emit('play');
          })
          .catch(e => console.error('静音后仍无法播放:', e));
      }
    });
  }
};

// 暂停视频
const pauseVideo = () => {
  if (videoRef.value) {
    videoRef.value.pause();
    isPlaying.value = false;
    emit('pause');
  }
};

// 监听视频事件
const setupVideoEvents = () => {
  if (!videoRef.value) return;
  
  videoRef.value.addEventListener('play', () => {
    isPlaying.value = true;
  });
  
  videoRef.value.addEventListener('pause', () => {
    isPlaying.value = false;
  });
  
  videoRef.value.addEventListener('ended', () => {
    isPlaying.value = false;
    emit('ended');
  });
};

// 处理自动播放
const attemptAutoplay = () => {
  if (props.autoplay && videoRef.value) {
    const playPromise = videoRef.value.play();
    
    if (playPromise !== undefined) {
      playPromise.then(() => {
        isPlaying.value = true;
        console.log('视频自动播放成功');
      }).catch(error => {
        console.log('视频自动播放被阻止:', error);
        // 静音后尝试重新播放
        if (videoRef.value) {
          videoRef.value.muted = true;
          videoRef.value.play().catch(e => {
            console.log('即使静音后仍无法播放视频:', e);
            // 可能需要用户交互才能播放
          });
        }
      });
    }
  }
};

// 调整移动端视频尺寸
const adjustVideoSize = () => {
  if (isMobile.value && videoRef.value) {
    videoRef.value.style.height = 'auto';
    // 在移动端上可以添加其他样式调整
  }
};

// 组件挂载后初始化
onMounted(() => {
  setupVideoEvents();
  attemptAutoplay();
  adjustVideoSize();
  
  // 监听窗口尺寸变化
  window.addEventListener('resize', adjustVideoSize);
});

// 在视口可见性变化时处理视频播放
watch(() => isMobile.value, () => {
  adjustVideoSize();
});

// 组件卸载前清理
onBeforeUnmount(() => {
  window.removeEventListener('resize', adjustVideoSize);
  if (videoRef.value) {
    videoRef.value.pause();
  }
});

// 暴露组件方法
defineExpose({
  playVideo,
  pauseVideo,
  videoElement: videoRef
});
</script>

<script lang="ts">
// 添加默认导出
export default {
  name: 'VideoPlayer'
};
</script>

<style scoped lang="scss">
.video-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
}

.video-player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-button-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: background-color 0.3s ease;
  
  &:hover {
    background-color: rgba(0, 0, 0, 0.4);
  }
}

.play-button {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease;
  
  &:hover {
    transform: scale(1.1);
  }
}

/* 移动端适配 */
.mobile-view {
  .video-player {
    height: auto !important;
    max-height: 60vh;
  }
  
  .play-button {
    width: 50px;
    height: 50px;
    
    svg {
      width: 32px;
      height: 32px;
    }
  }
}

/* 响应式调整 */
@media (max-width: 992px) {
  .video-container {
    max-height: 70vh;
  }
}

@media (max-width: 768px) {
  .video-container {
    max-height: 60vh;
  }
}

@media (max-width: 576px) {
  .video-container {
    max-height: 50vh;
  }
  
  .play-button {
    width: 40px;
    height: 40px;
    
    svg {
      width: 24px;
      height: 24px;
    }
  }
}
</style> 